<template>
	<view class="pwd-retrieve-container">
		<view :class="i===0?'background-white':'background-white bor-top'" v-for="(f,i) in checkList" :key="i">
			<view>
				<view class="content">报告类型：<text>{{f.typeLabel || '--'}}</text></view>
			</view>
			<view>
				<view class="content">日期：<text>{{f.applyTime || '--'}}</text></view>
			</view>
			<view>
				<view class="content">下一个报告日期：<text>{{f.lastReportTime || '--'}}</text></view>
			</view>
			<view>
				<view class="content">附件：<text style="color: #5d95ae;" class="title"
						@click="filePreview(f.docUrl)">{{getFileName(f.docUrl) || '--'}}</text>
				</view>
			</view>
			<view>
				<view class="content">备注：<text>{{f.remark || '--'}}</text></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			checkList: {
				type: Array,
				default: () => ([])
			},
		},
		methods: {
			filePreview(fileUrl) {
				if (fileUrl) {
					uni.navigateTo({
						url: '/pages/work/training-tasks/file-preview?url=' +
							encodeURIComponent(fileUrl),
					});
				}
			},
			getFileName(name) {
				if (name.lastIndexOf('/') > -1) {
					return name.slice(name.lastIndexOf('/') + 1)
				}
				return ''
			}

		}
	}
</script>

<style lang="scss" scoped>
	.pwd-retrieve-container {
		.background-white {
			background-color: #fff;
			padding: 20rpx 30rpx 1rpx 30rpx;

			view {
				padding: 14rpx 0;

				text {
					color: #666666;
					display: inline-block;
					width: 65%;
					vertical-align: top;
				}

				.title {
					@include text-overflow-ellipsis(1)
				}
			}

			.content {
				display: flex;
				content: 1px solid #D5D7E3;
			}

			.photo {
				display: flex;
				justify-content: space-between;

				image {
					width: 214rpx;
					height: 214rpx;
				}
			}
		}
	}

	.hidden-title {
		background: #f5f5f5;
		padding: 20rpx;
		color: #999;
	}

	.bor-top {
		border-top: 20rpx solid #f5f5f5;
	}

	.content {
		display: flex;
		align-items: center;
	}
</style>